import { Card, CardBody, CardHeader, Button } from "@heroui/react";

import DefaultLayout from "@/layouts/default";

export default function PricingPage() {
  // Mock data for pricing plans
  const pricingPlans = [
    {
      id: 1,
      name: "基础版",
      price: "¥0",
      period: "/月",
      description: "适合个人用户和小型项目",
      features: [
        "最多5个用户",
        "1GB存储空间",
        "基础支持",
        "社区论坛访问",
        "基础报告"
      ],
      cta: "免费使用",
      popular: false
    },
    {
      id: 2,
      name: "专业版",
      price: "¥99",
      period: "/月",
      description: "适合中小型企业",
      features: [
        "最多50个用户",
        "10GB存储空间",
        "优先支持",
        "高级报告",
        "API访问",
        "自定义域名"
      ],
      cta: "立即购买",
      popular: true
    },
    {
      id: 3,
      name: "企业版",
      price: "¥299",
      period: "/月",
      description: "适合大型企业和组织",
      features: [
        "无限制用户",
        "100GB存储空间",
        "24/7专属支持",
        "高级分析",
        "API访问",
        "自定义域名",
        "安全审计",
        "SLA保障"
      ],
      cta: "联系我们",
      popular: false
    }
  ];

  // Mock data for FAQs
  const faqs = [
    {
      id: 1,
      question: "如何开始使用？",
      answer: "注册账户后即可免费使用基础版功能，如需升级可随时在账户设置中选择其他套餐。"
    },
    {
      id: 2,
      question: "支持退款吗？",
      answer: "我们提供14天无理由退款保证，如果您对服务不满意可以随时申请退款。"
    },
    {
      id: 3,
      question: "如何升级套餐？",
      answer: "您可以在账户设置中随时升级套餐，费用将按比例计算并立即生效。"
    },
    {
      id: 4,
      question: "支持哪些支付方式？",
      answer: "我们支持支付宝、微信支付、银联卡以及国际信用卡等多种支付方式。"
    }
  ];

  return (
    <DefaultLayout>
      <div className="flex flex-col gap-8 py-8">
        {/* Page Header */}
        <div className="flex flex-col items-center text-center gap-4">
          <h1 className="text-3xl font-bold">选择适合您的套餐</h1>
          <p className="text-default-500 max-w-2xl">
            无论您是个人用户还是企业团队，我们都有合适的套餐满足您的需求。
            所有套餐均提供14天免费试用期。
          </p>
        </div>

        {/* Pricing Plans */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {pricingPlans.map((plan) => (
            <Card 
              key={plan.id} 
              className={`border-none shadow-lg ${plan.popular ? 'ring-2 ring-primary' : ''}`}
            >
              {plan.popular && (
                <div className="bg-primary text-white text-center py-2 rounded-t-large">
                  <p className="text-sm font-bold">最受欢迎</p>
                </div>
              )}
              <CardHeader className="pb-0 pt-4 px-4 flex-col items-center">
                <h3 className="text-xl font-bold">{plan.name}</h3>
                <p className="text-default-500 text-center">{plan.description}</p>
                <div className="flex items-baseline gap-1 mt-2">
                  <span className="text-3xl font-bold">{plan.price}</span>
                  <span className="text-default-500">{plan.period}</span>
                </div>
              </CardHeader>
              <CardBody className="overflow-visible py-4">
                <ul className="space-y-3 mb-6">
                  {plan.features.map((feature, index) => (
                    <li key={index} className="flex items-center gap-2">
                      <div className="w-5 h-5 rounded-full bg-success flex items-center justify-center">
                        <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M5 13l4 4L19 7"></path>
                        </svg>
                      </div>
                      <span className="text-small">{feature}</span>
                    </li>
                  ))}
                </ul>
                <Button 
                  className="w-full" 
                  color={plan.popular ? "primary" : "default"}
                  variant={plan.popular ? "solid" : "bordered"}
                >
                  {plan.cta}
                </Button>
              </CardBody>
            </Card>
          ))}
        </div>

        {/* Features Comparison */}
        <Card className="shadow-sm">
          <CardHeader>
            <h2 className="text-2xl font-bold text-center">功能对比</h2>
          </CardHeader>
          <CardBody>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-default-200">
                    <th className="text-left py-3 px-4">功能</th>
                    <th className="text-center py-3 px-4">基础版</th>
                    <th className="text-center py-3 px-4">专业版</th>
                    <th className="text-center py-3 px-4">企业版</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b border-default-100">
                    <td className="py-3 px-4">用户数量</td>
                    <td className="text-center py-3 px-4">最多5个</td>
                    <td className="text-center py-3 px-4">最多50个</td>
                    <td className="text-center py-3 px-4">无限制</td>
                  </tr>
                  <tr className="border-b border-default-100">
                    <td className="py-3 px-4">存储空间</td>
                    <td className="text-center py-3 px-4">1GB</td>
                    <td className="text-center py-3 px-4">10GB</td>
                    <td className="text-center py-3 px-4">100GB</td>
                  </tr>
                  <tr className="border-b border-default-100">
                    <td className="py-3 px-4">支持服务</td>
                    <td className="text-center py-3 px-4">基础支持</td>
                    <td className="text-center py-3 px-4">优先支持</td>
                    <td className="text-center py-3 px-4">24/7专属支持</td>
                  </tr>
                  <tr className="border-b border-default-100">
                    <td className="py-3 px-4">报告功能</td>
                    <td className="text-center py-3 px-4">基础报告</td>
                    <td className="text-center py-3 px-4">高级报告</td>
                    <td className="text-center py-3 px-4">高级分析</td>
                  </tr>
                  <tr className="border-b border-default-100">
                    <td className="py-3 px-4">API访问</td>
                    <td className="text-center py-3 px-4">-</td>
                    <td className="text-center py-3 px-4">✓</td>
                    <td className="text-center py-3 px-4">✓</td>
                  </tr>
                  <tr className="border-b border-default-100">
                    <td className="py-3 px-4">自定义域名</td>
                    <td className="text-center py-3 px-4">-</td>
                    <td className="text-center py-3 px-4">✓</td>
                    <td className="text-center py-3 px-4">✓</td>
                  </tr>
                  <tr>
                    <td className="py-3 px-4">安全审计</td>
                    <td className="text-center py-3 px-4">-</td>
                    <td className="text-center py-3 px-4">-</td>
                    <td className="text-center py-3 px-4">✓</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </CardBody>
        </Card>

        {/* FAQs */}
        <Card className="shadow-sm">
          <CardHeader>
            <h2 className="text-2xl font-bold text-center">常见问题</h2>
          </CardHeader>
          <CardBody>
            <div className="space-y-4">
              {faqs.map((faq) => (
                <div key={faq.id} className="border-b border-default-200 pb-4 last:border-0 last:pb-0">
                  <h3 className="text-lg font-medium mb-2">{faq.question}</h3>
                  <p className="text-default-500">{faq.answer}</p>
                </div>
              ))}
            </div>
          </CardBody>
        </Card>
      </div>
    </DefaultLayout>
  );
}